<div class="row mb-4">
    <div class="col-12">

        <div class="card">
            <div class="card-body">
                <filter-list request="request" callback="loadUsers(pageIndex)" create-url="'/portal/user/create'"
                    create-text="'Create User'"></filter-list>
                <hr>
                <table class="table table-sm table-hover mb-0" cellspacing="0" ng-init="loadUsers(0)">
                    <thead class="thead-light">
                        <tr>
                            <!-- <th scope="col" width="20%">
                                                Id
                                            </th> -->
                            <th scope="col" width="10%">
                                Username
                            </th>
                            <th scope="col" width="20%">
                                Roles
                            </th>
                            <th scope="col" width="10%">
                                Avatar
                            </th>
                            <th scope="col" width="10%">
                                Created Date
                            </th>

                            <th scope="col" style="width: 5%;" class="text-right"></th>
                        </tr>
                    </thead>

                    <tbody class="sortable">
                        <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="user"
                            sort-model-id="{{item.id}}">
                            <!-- <td>
                                                <small><span ng-bind="item.id"></span></small>
                                            </td> -->
                            <td>
                                <small ng-bind="item.username"></small>
                            </td>
                            <td>
                                <small>
                                    <ul class="m-0 p-0">
                                        <li ng-repeat="ur in item.userRoles">
                                            <span ng-bind="ur.role.name"></span>
                                        </li>
                                    </ul>
                                </small>
                            </td>
                            <td>
                                <preview-image img-height="25" img-src="item.avatarUrl"></preview-image>
                            </td>
                            <td>
                                <small class="text-black-50">
                                    {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <a href="/portal/user/details/{{item.id}}" class="btn btn-link text-primary">
                                        <span class="fa fa-pen"></span>
                                    </a>
                                    <a ng-click="removeUser(item.id);" class="btn btn-link text-danger">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">

                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="loadUsers(page-1)"
                    scroll-top="true">
            </div>
        </div>
    </div>
</div>